<template>
    <div>
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="motify-form">
    <div class="col-md-9 left-col">
        <div class="panel panel-default padding-md">
            <div class="panel-body">
                <van-form @submit="updatePassword" ref='form'>
                <van-field
                    v-model.trim="oldPass"
                    type="password"
                    name="原密码"
                    label="原密码"
                    placeholder="原密码"
                    :rules="[{ required: true, message: '请填写原密码' }]"
                />
                <van-field
                    v-model.trim="newPass"
                    type="password"
                    name="validator"
                    label="新密码"
                    placeholder="新密码"
                    :rules="newPwdRules"
                />
                <van-field
                    v-model.trim="rePass"
                    type="password"
                    name="validator"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="rePassRules"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">确认修改</van-button>
                </div>
            </van-form>
            </div>
        </div>
    </div>
    </div>
    </div>
</template>

<script>
    export default {
        name: 'EditPassword',
        data() {
            return {
                oldPass: '',
                newPass: '',
                rePass: '', // 确认密码
                newPwdRules: [{
                    required: true,
                    message: '请输入新密码',
                    trigger: 'onBlur'
                }, {
                    // 自定义校验规则
                    // 自定义校验规则
                    validator: value => {
                        return /^[0-9A-Za-z]{6,18}$/
                            .test(value)
                    },
                    message: '密码必须是由6-18位字母或数字组合',
                    trigger: 'onBlur'
                }],
                rePassRules: [{
                    required: true,
                    message: '请再次确认密码',
                    trigger: 'onBlur'
                }, {
                    // 自定义校验规则
                    validator: value => {
                        if (value !== this.newPass) {
                            return false;
                        }else{
                            return true;
                        }
                    },
                    message: '两次密码不一致',
                    trigger: 'onBlur'
                }],
            }
        },
        // 在实例创建完成后，初始化密码的值
        created() {
        },
        methods: {
            // 更新密码
            updatePassword() {
                var userName = localStorage.getItem('account');
                var oldPass = this.oldPass;
                var newPass = this.newPass;
                // let params = {
                //     userName: window.localStorage.getItem('account'),
                //     oldPass: this.oldPass,
                //     newPass: this.newPass
                // }
                this.req.post("/user/changepass",{userName: userName,oldPass: oldPass, newPass: newPass})
                 .then(response => {
                    console.log(response.code);
                    if (response.code == 200) {
                        localStorage.removeItem('token');//将本地token置空，退出登录
                        localStorage.removeItem('role');
                        localStorage.removeItem('account');
                        localStorage.removeItem('userAccount');
                        localStorage.removeItem('userPassword');
                        // Toast.success('密码修改成功,请重新登录!');
                        this.$toast('密码修改成功,请重新登录!');
                        this.$router.push('/login')
                    }else{
                        this.oldPass = '';
                        this.$toast('修改失败,原密码不正确!');
                    }
                 })
                 .catch(err => {
                   console.log(err);
                 });
            },
            onClickLeft() {
                this.$router.push('/profile')
            }
        }
    }
</script>

<style scoped>
    .motify-form {
        text-align: center;
        padding-top: 50px;
        color: #000;
        /*   background-color: #d4d4d4;*/
    }
    .form-control{
        width: 320px;
        height: 40px;

        background: rgba(245, 245, 245, 0.9);
        border: none;
        outline: none;
        border-radius: 7px 7px 7px 7px;

        padding-left: 10px;
        color: var(--main-blue);
        font-size: 15px;
    }
    .button{
        width: 80px;
        height: 40px;
        background: rgba(245, 245, 245, 0.9);


        border: none;
        border-radius: 7px;
        outline: none;

        color: var(--main-blue);
        font-size: 15px;
        font-weight: bold;
    }
</style>